<template>
  <div class="preview-panel">
    <div class="btn preview-btn" @click="dialogTableVisible = true">
      <i-ep-view class="view-icon" :size="20" />
      <span class="btn-txt">预览</span>
    </div>
    <el-dialog
      :z-index="99999"
      top="50px"
      class="preview-config-wrapper"
      :destroy-on-close="true"
      :show-close="false"
      @open="openDialog"
      @closed="closedDialog"
      v-model="dialogTableVisible"
      :width="`${previewTab == 1 ? '498' : '1290'}`"
    >
      <div class="ml75">
        <div class="preview-tab">
          <div
            :class="`preview-tab-item ${previewTab == 1 ? 'active' : ''}`"
            @click="previewTab = 1"
          >
            <i-ep-iphone />
          </div>
          <div
            :class="`preview-tab-item ${previewTab == 2 ? 'active' : ''}`"
            @click="previewTab = 2"
          >
            <i-ep-monitor />
          </div>
        </div>
        <div :class="`preview-panel ${previewTab == 1 ? 'phone' : 'pc'}`">
          <div class="wrapper">
            <div class="tips-wrapper">
              <i-ep-WarningFilled /> <span>用户预览模式，数据不保存！</span>
            </div>
            <!-- <div v-loading="loading" element-loading-text="加载中..." style="height: 100%"> -->
            <div class="preview-panel-wrapper">
              <!-- <iframe
                v-loading="loading"
                id="iframe-preview"
                :src="fullUrl || `/myactivity/preview/${formId}`"
                frameborder="0"
                width="100%"
                height="100%"
              ></iframe> -->
              <PreviewPanel />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import PreviewPanel from '../settingModule/skin/PreviewPanel.vue'

const route = useRoute()

const dialogTableVisible = ref(false)
const previewTab = ref(1)
const formId = route.params.id || ''
const loading = ref(false)
setTimeout(() => {
  loading.value = false
}, 1000)

const openDialog = () => {
  const iframePreview = document.getElementById('iframe-preview')
  if (!iframePreview) return
  iframePreview.onload = function () {
    loading.value = false
  }
}

const routerMode = ref(import.meta.env.VITE_ROUTER_MODE);

const fullUrl = import.meta?.env?.VITE_CLIENT_TYPE === 'electron' ? (routerMode.value === 'hash' ? `${window.$app?.homePage||(location.origin+'/myactivity')}/render.html#/${formId}?t=${Date.now()}` : `${window.$app?.homePage||(location.origin+'/myactivity')}/render/${formId}?t=${Date.now()}`) : ''
const closedDialog = () => {
  loading.value = true
}
</script>
<style lang="scss" scoped>
@use '@/management/styles/edit-btn.scss' as *;

.preview-panel {
  :deep(.preview-config-wrapper) {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }
  .ml75 {
    margin-left: 75px;
  }

  .view-icon {
    font-size: 20px;
    height: 29px;
    line-height: 29px;
  }

  .preview-tab {
    display: flex;
    align-items: center;
    justify-content: center;

    .border-right-none {
      border-right: none;
    }

    .active {
      border-color: $primary-color;
      color: $primary-color;
    }

    .border-left-none {
      border-left: none;
    }

    &-item {
      width: 80px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid rgba(227, 228, 232, 1);
      cursor: pointer;
      &:hover {
        border-color: $primary-color;
        color: $primary-color;
      }
    }
  }
  .preview-panel {
    margin-top: 16px;
    .preview-panel-wrapper {
      height: 100%;
      overflow: hidden;
      border-radius: 0 0 60px 60px;
    }
    &.pc {
      display: flex;
      justify-content: center;
      background: #f1f2f3;
      box-shadow: 0px 2px 10px -2px rgba(82, 82, 102, 0.2);
      height: 726px;
      .wrapper {
        width: 636px;
        height: 704px;
      }
      .preview-panel-wrapper {
        border-radius: 0;
      }
    }
    &.phone {
      display: flex;
      align-items: center;
      justify-content: center;

      .wrapper {
        background: url('@assets/images/preview-phone.png') no-repeat;
        width: 442px;
        height: 810px;
        background-size: 100% 100%;
        padding: 0 26px;
        padding-top: 72px;
        padding-bottom: 22px;
        display: flex;
        flex-direction: column;
      }
      iframe {
        border-radius: 0px 0px 50px 50px;
      }
    }
  }
  .tips-wrapper {
    display: flex;
    align-items: center;
    background: $primary-bg-color;
    color: $primary-color;
    font-size: 12px;
    padding: 2px 0;
    padding-left: 9px;

    span {
      margin-left: 5px;
    }
  }
}
.btn.preview-btn {
  // .btn-txt {
  //   font-size: 14px;
  // }
  // flex-direction: row;
  align-items: center;
  &:hover {
    color: $primary-color;
  }
  // margin-right: 10px;
}
</style>
